<div class="modal-body">
  <form #form="ngForm">
    <pre *ngIf="debug">{{ stringified }}</pre>
    <div #step_container></div>
  </form>
</div>
<div class="modal-footer">
  <button
    id="close"
    class="btn btn-default"
    type="button"
    [ngClass]="{'pull-left': !isReadOnly || !isSingleStep}"
    (click)="modal.close()"
  >
    {{ isReadOnly ? 'Close' : 'Discard' }}
  </button>
  <button
    *ngIf="!isSingleStep"
    id="previous"
    class="btn btn-default"
    type="button"
    (click)="go(-1)"
    [disabled]="getStep(-1) === null"
  >
      &nbsp;<span class="glyphicon glyphicon-menu-left"></span>&nbsp;
  </button>
  <button
    *ngIf="!isSingleStep"
    id="next"
    class="btn btn-primary"
    type="button"
    (click)="go(1)"
    [disabled]="getStep(1) === null || !stepIsValid()"
  >
    &nbsp;<span class="glyphicon glyphicon-menu-right"></span>&nbsp;
  </button>
  <button
    *ngIf="!isReadOnly"
    id="save"
    class="btn btn-primary"
    type="button"
    (click)="save()"
    [disabled]="!modelIsValid()"
  >
    Save changes
  </button>
</div>
